/** * @Description: WoShop商城 * @Author: Parker * @Copyright: 武汉一一零七科技有限公司©版权所有 * @Link: www.wo-shop.net * @Contact: QQ:2487937004 */
<template>
	<view class="index_class homeBody">
		<render-widget v-for="item in getComponentList" :key="item.id" :item="item"></render-widget>
		<popupContact></popupContact>
	</view>
</template>

<script>
import shopWindow from '@/components/shopWindow'; //橱窗组件
import shopCard from '@/components/shopCard'; //店铺组件
import goodsCard from '@/components/goodsCard';
import isLoginTips from '@/components/isLoginTips';
import popupContact from '@/components/popup-contact';
import RenderWidget from '@/components/render-widget'
import diyApi from '@/api/diyApi';
import { mapGetters } from 'vuex';
let page = 1;
let shopPage = 1;
export default {
	name:'DiyHome',
	data() {
		return {
			scrollTop: 0,
			sortList: [],
			isLogin: 0, //判断是否登陆
			swiper_height: '150px',
			headerPosition: 'fixed',
			swiperItems: [],
			goodsList: [],
			timeBanner: '',
			goodsinfo: {},
			loadingType: 0,
			seckillTime: {
				hour: 0,
				coundown: 0
			},
			xm: 0,
			isShow: [],
			cardInfo: {
				seckill: {},
				live: {},
				assemble: {},
				new_goods: {}
			},
			isScrollTop: false,
			shopList: [],
			homeBg: {},
			bgColor: '#fa3f3f',
			imgStaticUrl: '',
			bannerList: [],
			country: '',
			navList: [],
			background: {
				'background-image': 'linear-gradient(45deg, #FA2E1B, #FF523C)'
				// background: '#de3947',
			},
			stickyTop: 175,
			navBarHeight: 88,
			activeItemStyle: {
				fontSize: '34rpx'
			},
			backIconName: 'grid-fill',
			keyword: '',
			offsetTop: 0,
			messageBadgeShow: false,
			couponBadgeShow: false,
			capsule: {}, // 胶囊图

			goodsShopType: 1,
			goodsShopList: [], // 店铺列表
			imgSTATICURL: this.STATICURL,
			location: {
				citycode: '',
				name: '',
				pinyin: '',
				lng: '',
				lat: ''
			},
			auditProjectId: '',
			diyData: {}
		};
	},

	components: {
		shopWindow,
		shopCard,
		goodsCard,
		isLoginTips,
		popupContact,
		RenderWidget
	},

	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.$t('WoShop商城·好物分享'),
			path: '/pages/tabBar/home'
		};
	},
	computed: {
		...mapGetters(['showMutipleShopper']),
		getComponentList() {
			const { pages = [] } = this.diyData;
			const { componentList = [] } = pages[0] || {};
			return componentList
		}
	},

	onLoad() {
		uni.getStorageSync('location') && (this.location = uni.getStorageSync('location'));
		this.getPosition();

		// 兼容微信小程序写法
		this.imgStaticUrl = this.STATICURL;
		this.getBannerList();
		this.getCapsule();
		page = 1;
		this.loadingType = 0;
		this.goodsList = [];
		this.getIndexShowcase();
		this.getRecommendShops();
		this.getGoodsList();
		this.gethomeInfo();
		this.getMenuList();
		this.getIndexNavList();
		this.isInfoShow = false;
		this.stickyTop = 1;
		this.initH5();

		// #ifdef MP-WEIXIN
		//获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点
		let custom = wx.getMenuButtonBoundingClientRect();
		//导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。
		// this.stickyTop = custom.bottom + custom.top - uni.getSystemInfoSync().statusBarHeight
		// #endif
	},

	onShow() {
		if (uni.getStorageSync('token')) {
			this.$store.dispatch('contentnum');
		} else {
			this.isLogin = 0;
		}
		this.setOffestTop();
	},

	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop > 10) {
			this.isScrollTop = true;
		} else {
			this.isScrollTop = false;
		}
	},
	onShareTimeline(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '曜宇生活',
			path: '/pages/tabBar/Home'
		};
	},

	//下拉刷新
	onPullDownRefresh() {
		this.getBannerList();
		this.getCapsule();
		this.getIndexShowcase();
		this.getRecommendShops();
		this.getGoodsList();
		this.gethomeInfo();
		this.getMenuList();
		this.getIndexNavList();

		uni.stopPullDownRefresh();
	},

	methods: {
		// 初始化 - H5环境
		initH5() {
			this.initProject();
		},
		// 获取商城数据，初始化商城
		initProject() {
			// if (!projectId) {
			//   uni.showModal({
			//     title: "商城加载失败",
			//     content: "请传入参数id",
			//     showCancel: false,
			//   });
			//   this.loading = false;
			//   return;
			// }
			diyApi.getDiyData({ project_id: 'woshop_diy_demo' }).then((res) => {
				const { status, data = {} } = res;
				if (status === 200) {
					const { diy_data } = data;
					const _l = diy_data && JSON.parse(diy_data);
					this.diyData = _l;
				}
			});
		},

		// 格式化query
		formatQuery(query) {
			query = query.split('&');
			return query.reduce((params, item) => {
				let q = item.split('=');
				if (q.length === 2) params[q[0]] = q[1];
				return params;
			}, {});
		},

		// 加载完成，取消loading  小程序渲染卡顿，多加载一会，优化体验效果
		loadingComplete() {
			setTimeout(() => {
				this.loading = false;
			}, 1000);
		},
		//获取经纬度
		getPosition() {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function (res) {
					if (typeof res.address != 'undefined') {
						let location = {
							citycode: res.address.cityCode,
							name: res.address.city,
							pinyin: '',
							lng: res.longitude,
							lat: res.latitude
						};
						uni.setStorageSync('location', location);
						that.location = uni.getStorageSync('location');
					} else {
						that.$http.geocodeRegeo({ lng: res.longitude, lat: res.latitude }).then((res) => {
							if (res.status == 200) {
								let location = res.data;
								uni.setStorageSync('location', location);
								that.location = uni.getStorageSync('location');
							}
						});
					}
				},
				fail: function () {
					let location = {
						citycode: '',
						name: '全国',
						pinyin: '',
						lng: '',
						lat: ''
					};
					uni.setStorageSync('location', location);
				}
			});
		},

		// 适配吸顶tab高度
		setOffestTop() {
			// #ifndef H5
			let systemInfo = uni.getSystemInfoSync();
			let topPx = systemInfo.statusBarHeight + 44; // 顶部状态栏+沉浸式自定义顶部导航
			this.offsetTop = topPx / (uni.upx2px(topPx) / topPx); // px转rpx
			// #endif
		},
		changeNav(index) {
			let id = this.navList[index].id;
			this.$u.route('/pagesC/goods/categoryGoods', {
				id: id
			});
		},
		getBannerList() {
			const data = {
				tag: 'mobile_index_banner'
			};
			this.$http.getAdByTag(data).then((res) => {
				if (res.status == 200) {
					this.bannerList = res.data;
				}
			});
		},
		bannerClick(index) {
			let ad = this.bannerList[index];
			if (ad.ad_url != '') {
				this.$u.route({ url: ad.ad_url, type: ad.ad_url_type });
			}
		},
		getCapsule() {
			const data = {
				tag: 'mobile_index_capsule'
			};
			this.$http.getAdByTag(data).then((res) => {
				if (res.status == 200) {
					this.capsule = res.data[0];
				}
			});
		},
		capsuleClick() {
			if (this.capsule.ad_url != '') {
				this.$u.route({ url: this.capsule.ad_url, type: this.capsule.ad_url_type });
			}
		},
		getIndexNavList() {
			this.$http.getIndexNavList().then((res) => {
				if (res.status === 200) {
					this.navList = res.data;
				}
			});
		},
		getMenuList() {
			this.$http.getMenuList().then((res) => {
				if (res.status === 200) {
					const {
						data: { menu_list = [] }
					} = res;
					menu_list.map((res, i) => {
						if (res.id === 8 && !this.showMutipleShopper) {
							return;
						}
						return res;
					});
					this.sortList = menu_list;
				}
			});
		},
		signin() {
			if (uni.getStorageSync('token')) {
				this.getnav('/pagesB/my/signin');
			} else {
				this.$navigateTo('/pagesB/login/login');
			}
		},
		goLink(item) {
			this.$u.route({
				url: item.menu_url,
				type: item.menu_url_type
			});
		},
		timeuptime() {
			page = 1;
			this.loadingType = 0;
			this.goodsList = [];
			this.getGoodsList();
			this.gethomeInfo();
		},
		getIndexShowcase() {
			this.$http.getIndexShowcase().then((res) => {
				this.$nextTick(() => {
					this.cardInfo = res.data;
				});
			});
		},
		getRecommendShops() {
			this.$http.getRecommendShops().then((res) => {
				this.shopList = res.data;
			});
		},
		getGoodsList() {
			this.$http
				.getGoodsList({
					page: page
				})
				.then((res) => {
					if (res.status == 200) {
						if (res.data.length == 0) {
							this.loadingType = 2;
							return false;
						}
						this.goodsList = [...this.goodsList, ...res.data];
						this.loadingType = 0;
					}
				});
		},

		gethomeInfo() {
			this.$http.gethomeInfo().then((res) => {
				if (res.status == 200) {
					const date = new Date(Number(res.data.hdinfos.hdtime) * 1000);
					this.seckillTime.hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
					this.seckillTime.countdown = Number(res.data.hdinfos.end_time) - Number(res.data.hdinfos.dqtime);
				}
			});
		},

		getTab(src) {
			uni.switchTab({
				url: src
			});
		},

		getsing() {
			if (!uni.getStorageSync('token')) {
				this.getnav('/pagesB/login/login?');
			} else {
				this.getnav('/pagesB/personalSon');
			}
		},

		goodsShopTypeFunction(goodsShopType) {
			this.goodsShopType = goodsShopType;
			if (goodsShopType == 1) {
				page = 1;
				this.goodsList = [];
				this.getGoodsList();
			} else {
				shopPage = 1;
				this.goodsShopList = [];
				this.getShopList();
			}
		},

		getShopList() {
			this.$http
				.getShopList({
					page: shopPage,
					longitude: this.location.lng,
					latitude: this.location.lat
				})
				.then((res) => {
					if (res.status == 200) {
						if (res.data.length == 0) {
							this.loadingType = 2;
							return false;
						}
						this.goodsShopList = [...this.goodsShopList, ...res.data.data];
						this.loadingType = 0;
					}
				});
		}
	},

	onReachBottom() {
		if (this.loadingType == 1 || this.loadingType == 2) {
			return false;
		}
		this.loadingType = 1;
		page++;
		shopPage++;
		if (this.goodsShopType == 1) {
			this.getGoodsList();
		} else {
			this.getShopList();
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~uview-ui/index.scss';

.homeBody {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 170rpx;
}

.index_class /deep/ .u-tabs,
.index_class /deep/.nav-list,
.nav {
	background-image: linear-gradient(45deg, #fa2e1b, #ff523c) !important;
}

.gap-wrap {
	width: 750rpx;
	height: 25rpx;
	background-color: linear-gradient(45deg, #fa2e1b, #ff523c);
	.gap {
		background-color: #f9f9f9;
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}
}

.home-header {
	position: relative;
	width: 100%;

	.swipe-banner {
		width: 700rpx;
		margin: 0rpx 25rpx 30rpx;
	}
}

.sortWrap {
	padding: 0;
	display: flex;
	flex-wrap: wrap;

	.name {
		color: #242323;
		margin-top: 10rpx;
		font-size: 24rpx;
		font-weight: 400;
	}

	.box {
		flex-basis: 20%;
		flex-shrink: 0;
		text-align: center;
		@include flexbox($jc: center, $dr: column);
	}
}

.shopwindowWrap {
	display: flex;
	flex-wrap: wrap;
	border-radius: 16rpx;
	justify-content: space-between;
	padding: 0rpx;
	margin: 16rpx;
	overflow: hidden;
	background-color: #ffffff;
}

.shopWindow {
	width: 50% !important;
}

.bu_class {
	margin-top: 25rpx;
	padding: 0 10rpx;
}

.shopMall {
	background: #fff;
	padding: 20rpx;
	margin: 15rpx;
	border-radius: 12rpx;

	.shopCardWrap {
		margin-top: 8rpx;
		display: flex;
		overflow-x: auto;
	}

	.tit {
		color: #444;
	}
}

.seckillShopWindow {
	border-radius: 16rpx 0 0 0;
	overflow: hidden;

	/deep/.u-image__image {
		width: 80% !important;
	}
}
.newShopWindow {
	border-radius: 16rpx 0 0 0;
	overflow: hidden;
}

.assembleShopWindow {
	border-radius: 0 16rpx 0 0;
	overflow: hidden;
}

.homeActivity {
	padding: 20rpx 6rpx;
}

.navbar-right {
	margin-right: 24rpx;
	display: flex;
}

.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}

.right-item {
	margin: 0 12rpx;
	position: relative;
	color: #ffffff;
	display: flex;
}

.left-item {
	margin-left: 12rpx;
	position: relative;
	color: #ffffff;
	display: flex;
	line-height: 88rpx;
}
.left-item-view {
	width: 100rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}

.seckill-badge {
	color: #fff;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 32rpx;
	border-radius: 6rpx;
	padding: 2rpx;
	border-top-right-radius: 0rpx;
	border-bottom-right-radius: 0rpx;
}
.seckill-badge-countdown {
	background-color: rgba(249, 161, 161, 0.2);
	color: #fff;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 32rpx;
	border-radius: 6rpx;
	padding: 2rpx;
	border-top-left-radius: 0rpx;
	border-bottom-left-radius: 0rpx;
}

/deep/.u-countdown .u-countdown-colon {
	padding: 0;
}
/deep/.u-countdown .u-countdown-item {
	padding: 0;
}

.seckill-slot-wrap {
	display: flex;
}

.shop-search {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20upx;
	height: 60upx;
	width: 620upx;
	background-color: #eeefef;
	border-radius: 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.iconfont {
		height: 60upx;
		line-height: 60upx;
		width: 60upx;
		text-align: center;
		color: #999;
	}
	.bus-tap {
		height: 60upx;
		line-height: 60upx;
		width: 100upx;
		text-align: center;
		color: #333333;
	}
	input {
		flex: 1;
		color: #999;
		text-align: left;
	}
}
.itemsWrap {
	margin-top: 20upx;
	overflow-x: scroll;
	.items {
		width: 33%;
		margin-right: 20upx;
	}
}
.shopName {
	font-size: 30upx;
}
.shop-list {
	background-color: #fff;
	margin: 15upx 20upx;
	border-radius: 10px;
	padding: 25upx 20upx;
}
.location {
	text-align: right;
}
.location-distance {
	height: 60rpx;
}
</style>
